import React, { useState } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Input } from "@tarojs/components";
import { AtIcon } from "taro-ui";
import NavigationBar from "../../NavigationBar/NavigationBar";
import NavigationPlace from "../../NavigationBar/NavigationPlace";
import globalStore from "../../state/globalData";
import "./search.less";

const search = () => {
  const [inputval, setInputval] = useState("");

  const inputValue = value => {
    setInputval(value);
  };

  const toBack = () => {
    Taro.navigateBack({
      delta: -1
    });
  };

  const toHistory = ev => {
    console.log(ev);
  };

  const goSearch = () => {
    Taro.navigateTo({
      url: "/pages/home/searchRes"
    });
    console.log(inputval);
  };

  const clearHis = () => {
    console.log("清除历史记录");
  };

  return (
    <View className="home-search-wrap">
      <NavigationBar
        canBack={() => toBack}
        navigationTitle="搜索"
        backgroundColor="#ffffff"
        button={true}
        buttonIconType="ri"
        buttonIcon="close-line"
        buttonIconSize="30rpx"
        buttonBGC="#00000000"
      />
      <NavigationPlace />
      <View className="search-title h-container">今天想找什么？</View>
      <View className="search-input-warp h-container">
        <View className="search-input">
          <Input
            placeholder="万千好物等你搜索"
            onInput={e => inputValue(e.target.value)}
            value={inputval}
          />
        </View>
        <AtIcon
          className="search-button"
          prefixClass="ri"
          value="search-2-line"
          size="35"
          color="#000000"
          onClick={goSearch}
        ></AtIcon>
      </View>
      <View className="search-history h-container">
        <View className="history-header h-container">
          <Text>历史记录</Text>
          <Text onClick={clearHis}>清除历史记录</Text>
        </View>
        <Text onClick={() => toHistory("小米MIX 4")} className="history-item">
          小米MIX 4
        </Text>
        <Text className="history-item">包包</Text>
        <Text className="history-item">口红</Text>
        <Text className="history-item">双肩背包</Text>
        <Text className="history-item">飞跃鞋</Text>
        <Text className="history-item">移动电源</Text>
      </View>
    </View>
  );
};

export default search;
